<template>
  <div class="bigBox">
    <el-container>
      <el-main>
        <el-row style="background-color: #fff; width: 100%; height: 100%">
          <div class="box">
            <el-col :span="22">
              <div class="box1">
                <span style="font-size: 12px">商品添加编辑</span>
                <el-button @click="backTo">3 返回</el-button>
              </div>
              <div class="box2">
                <el-form
                  ref="ruleFormRef"
                  :model="ruleForm"
                  :rules="rules"
                  label-width="120px"
                  class="demo-ruleForm"
                  :size="formSize"
                  status-icon
                >
                  <el-form-item label="商品分类" prop="region">
                    <el-select v-model="ruleForm.region">
                      <el-option label="Zone one" value="shanghai" />
                      <el-option label="Zone two" value="beijing" />
                    </el-select>
                  </el-form-item>

                  <el-form-item label="商品类型" prop="type">
                    <el-checkbox-group v-model="ruleForm.type">
                      <el-checkbox label="虚拟物品" name="type" />
                      <el-checkbox label="实物物品" name="type" />
                      <el-checkbox label="积分兑换商品" name="type" />
                    </el-checkbox-group>
                  </el-form-item>
                  <el-form-item label="商品名称" prop="region">
                    <el-input
                      v-model="goodsName"
                      placeholder="请输入商品名称"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="商品售价" prop="region">
                    <el-input
                      v-model="goodsPrice"
                      placeholder="请输入商品售价"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="商品介绍" prop="region">
                    <quill-editor
                      :disabled="true"
                      theme="snow"
                      content-type="html"
                      enable
                      :content="desc"
                    />
                  </el-form-item>
                  <el-form-item label="标签" prop="region">
                    <el-tag
                      v-for="tag in dynamicTags"
                      :key="tag"
                      class="mx-1"
                      closable
                      :disable-transitions="false"
                      @close="handleClose(tag)"
                      style="margin-right: 15px"
                    >
                      {{ tag }}
                    </el-tag>
                    <el-input
                      v-if="inputVisible"
                      ref="InputRef"
                      v-model="inputValue"
                      class="ml-1 w-20"
                      size="small"
                      @keyup.enter="handleInputConfirm"
                      @blur="handleInputConfirm"
                    />
                    <el-button
                      v-else
                      class="button-new-tag ml-1"
                      size="small"
                      @click="showInput"
                    >
                      + New Tag
                    </el-button>
                  </el-form-item>

                  <el-form-item label="商品头图">
                    <div class="demo-image">
                      <div v-for="fit in fits" :key="fit" class="block">
                        <el-image
                          style="width: 100px; height: 100px"
                          :src="url"
                          :fit="fit"
                        />
                        <div>
                          <span>设为主图</span>
                          <span>删除图片</span>
                        </div>
                      </div>
                    </div>
                    <!-- 上传图片 -->
                    <el-upload
                      action="#"
                      list-type="picture-card"
                      :auto-upload="false"
                    >
                      <el-icon><Plus /></el-icon>

                      <template #file="{ file }">
                        <div>
                          <img
                            class="el-upload-list__item-thumbnail"
                            :src="file.url"
                            alt=""
                          />
                          <span class="el-upload-list__item-actions">
                            <span
                              class="el-upload-list__item-preview"
                              @click="handlePictureCardPreview(file)"
                            >
                              <el-icon><zoom-in /></el-icon>
                            </span>
                            <span
                              v-if="!disabled"
                              class="el-upload-list__item-delete"
                              @click="handleDownload(file)"
                            >
                              <el-icon><Download /></el-icon>
                            </span>
                            <span
                              v-if="!disabled"
                              class="el-upload-list__item-delete"
                              @click="handleRemove(file)"
                            >
                              <el-icon><Delete /></el-icon>
                            </span>
                          </span>
                        </div>
                      </template>
                    </el-upload>

                    <el-dialog v-model="dialogVisible">
                      <img w-full :src="dialogImageUrl" alt="Preview Image" />
                    </el-dialog>
                  </el-form-item>
                  <!-- 上传视频 -->
                  <el-form-item label="主图视频" prop="region">
                    <el-upload
                      v-model:file-list="fileList1"
                      class="upload-demo"
                      action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                      multiple
                      :on-preview="handlePreview1"
                      :on-remove="handleRemove1"
                      :before-remove="beforeRemove1"
                      :limit="3"
                      :on-exceed="handleExceed1"
                    >
                      <el-button type="primary">上传视频</el-button>
                      <template #tip>
                        <div class="el-upload__tip">
                          注：视频只能上传mp4格式，大小不超过50M
                        </div>
                      </template>
                    </el-upload>
                  </el-form-item>
                  <el-form-item style="margin-left: 500px">
                    <el-button type="primary" @click="submitForm(ruleFormRef)"
                      >完成，提交保存</el-button
                    >
                  </el-form-item>
                </el-form>
              </div>
            </el-col>
          </div>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import { useRouter } from "vue-router";
import { Delete, Download, Plus, ZoomIn } from "@element-plus/icons-vue";
import { reactive, ref, nextTick } from "vue";
import { ElMessage, ElMessageBox, ElInput } from "element-plus";
import type { UploadFile } from "element-plus";
const router = useRouter();
// import router from "../../router";
//图片
const fits = ["1", "2", "3"];
const url =
  "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg";
//上传图片
const dialogImageUrl = ref("");
const dialogVisible = ref(false);
const disabled = ref(false);

const handleRemove = (file: UploadFile) => {
  console.log(file);
};

const handlePictureCardPreview = (file: UploadFile) => {
  dialogImageUrl.value = file.url!;
  dialogVisible.value = true;
};

const handleDownload = (file: UploadFile) => {
  console.log(file);
};
//上传视屏
const fileList1 = ref<UploadUserFile[]>([
  //   {
  //     name: 'element-plus-logo.svg',
  //     url: 'https://element-plus.org/images/element-plus-logo.svg',
  //   },
]);
const handleRemove1: UploadProps["onRemove"] = (file, uploadFiles) => {
  console.log(file, uploadFiles);
};

const handlePreview1: UploadProps["onPreview"] = (uploadFile) => {
  console.log(uploadFile);
};

const handleExceed1: UploadProps["onExceed"] = (files, uploadFiles) => {
  ElMessage.warning(
    `The limit is 3, you selected ${files.length} files this time, add up to ${
      files.length + uploadFiles.length
    } totally`
  );
};

const beforeRemove1: UploadProps["beforeRemove"] = (
  uploadFile,
  uploadFiles
) => {
  return ElMessageBox.confirm(
    `Cancel the transfert of ${uploadFile.name} ?`
  ).then(
    () => true,
    () => false
  );
};
//标签

const inputValue = ref("");
const dynamicTags = ref(["Tag 1", "Tag 2", "Tag 3"]);
const inputVisible = ref(false);
const InputRef = ref<InstanceType<typeof ElInput>>();

const handleClose = (tag: string) => {
  dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1);
};

const showInput = () => {
  inputVisible.value = true;
  nextTick(() => {
    InputRef.value!.input!.focus();
  });
};

const handleInputConfirm = () => {
  if (inputValue.value) {
    dynamicTags.value.push(inputValue.value);
  }
  inputVisible.value = false;
  inputValue.value = "";
};
//
const formSize = ref("default");
const goodsName = ref("");
const goodsPrice = ref("");
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive({
  name: "Hello",
  region: "",
  count: "",
  date1: "",
  date2: "",
  delivery: false,
  type: [],
  resource: "",
  desc: "",
});

const rules = reactive<FormRules>({
  name: [
    { required: true, message: "Please input Activity name", trigger: "blur" },
    { min: 3, max: 5, message: "Length should be 3 to 5", trigger: "blur" },
  ],
  region: [
    {
      required: true,
      message: "Please select Activity zone",
      trigger: "change",
    },
  ],
  count: [
    {
      required: true,
      message: "Please select Activity count",
      trigger: "change",
    },
  ],
  date1: [
    {
      type: "date",
      required: true,
      message: "Please pick a date",
      trigger: "change",
    },
  ],
  date2: [
    {
      type: "date",
      required: true,
      message: "Please pick a time",
      trigger: "change",
    },
  ],
  type: [
    {
      type: "array",
      required: true,
      message: "Please select at least one activity type",
      trigger: "change",
    },
  ],
  resource: [
    {
      required: true,
      message: "Please select activity resource",
      trigger: "change",
    },
  ],
  desc: [
    { required: true, message: "Please input activity form", trigger: "blur" },
  ],
});

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log("submit!");
    } else {
      console.log("error submit!", fields);
    }
  });
};
//返回
const backTo = () => {
  console.log(111);
  router.push("/mainView/ListGoods");
};

const options = Array.from({ length: 10000 }).map((_, idx) => ({
  value: `${idx + 1}`,
  label: `${idx + 1}`,
}));
</script>

<style scoped>
.bigBox {
  width: 100%;
  height: 100%;
  background-color: #e4e4e4;
}
.box {
  width: 100%;
  height: 100%;
  /* background-color: red; */
  /* padding: 50px, 0px; */
  padding: 20px 0px;
  display: flex;
  justify-content: center;
}
.el-col {
  border: 1px solid grey;
  border-radius: 5px;
}
.box1 {
  background-color: #f3f3f3;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  border-radius: 5px;
}
.box2 {
  /* width: 100%;
  height: 100%; */
  padding: 50px;
  background-color: #fff;
}
.demo-image .block {
  padding: 30px 0;
  text-align: center;
  /* border-right: solid 1px var(--el-border-color); */
  display: inline-block;
  /* width: 25%; */
  box-sizing: border-box;
  vertical-align: top;
  margin-right: 50px;
}
/* .demo-image .block:last-child {
  border-right: none;
} */
.demo-image .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
.el-row {
  overflow: hidden;
}
/* .ql-toolbar.ql-snow {
  width: 100%;
}
.ql-container.ql-snow {
  width: 100%;
  height: 100px;
} */
.quill-editor {
  height: 400px;
}
</style>
